<template>
  <div class="flexrow">
    <div>
      <el-select
        v-model="province_val"
        filterable
        placeholder="请选择"
        @change="handleChange(1)"
      >
        <el-option
          v-for="item in province_opt"
          :key="item[0]"
          :label="item[1]"
          :value="item[0]"
        >
        </el-option>
      </el-select>
    </div>
    <div>
      <el-select
        v-model="city_val"
        filterable
        placeholder="请选择"
        @change="handleChange(2)"
      >
        <el-option
          v-for="item in city_opt"
          :key="item[0]"
          :label="item[1]"
          :value="item[0]"
        >
        </el-option>
      </el-select>
    </div>
    <div>
      <el-select
        v-model="school_val"
        filterable
        placeholder="请选择"
        @change="handleChange(3)"
      >
        <el-option
          v-for="item in school_opt"
          :key="item[2]"
          :label="item[2]"
          :value="item[2]"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import { getSchool } from "@/utils/school";
export default {
  name: "WkSchoolSelect",

  components: {},
  props: {
    editVal: {
      type: String,
    },
  },
  data() {
    return {
      province_opt: [],
      province_val: "",
      city_opt: [],
      city_val: "",
      school_opt: [],
      school_val: "",
      provinceArr: [],
      cityArr: [],
      schoolArr: [],
      editShow:false,
    };
  },

  mounted() {},
  watch: {
    province_val(nVal, oVal) {
      if (nVal == oVal) return;
      if (!this.editShow) this.city_val = "";
      if (!this.editShow) this.school_val = "";
      this.city_opt = this.cityArr[nVal];
      if (this.editShow) {
        let city = "";
        for (let i = 0; i < this.city_opt.length; i++) {
          const i_obj = this.city_opt[i];
          if (i_obj[1] == this.editVal.split("|")[1]) city = i_obj[0];
        }
        this.city_val = city;
      }
    },
    city_val(nVal, oVal) {
      if (!this.editShow) this.school_val = "";
      this.school_opt = this.schoolArr[nVal];
      if(this.editShow){
        this.school_val =this.editVal.split("|")[2];
        this.editShow=false;
      } 
    },
  },
  created() {
    const obj = getSchool();
    this.province_opt = obj.province;
    this.provinceArr = obj.province;
    this.city_opt = obj.province;
    this.cityArr = obj.city;
    this.school_opt = obj.province;
    this.schoolArr = obj.allschool;
    if (this.editVal) {
      this.editShow=true;
      const val = this.editVal.split("|");
      let province = "";
      for (let i = 0; i < this.province_opt.length; i++) {
        const i_obj = this.province_opt[i];
        if (i_obj[1] == val[0]) province = i_obj[0];
      }
      this.province_val = province;
     
    }
  },
  methods: {
    handleChange() {
      let province = "";
      for (let i = 0; i < this.province_opt.length; i++) {
        const i_obj = this.province_opt[i];
        if (i_obj[0] == this.province_val) province = i_obj[1];
      }
      let city = "";
      for (let i = 0; i < this.city_opt.length; i++) {
        const i_obj = this.city_opt[i];
        if (i_obj[0] == this.city_val) city = i_obj[1];
      }
      this.$emit("school", province + "|" + city + "|" + this.school_val);
    },
  },
};
</script>
<style lang="scss" scoped>
.flexrow {
  display: flex;
  flex-direction: row;
}
</style>
